<template>
  <div>
    <h3>发表评论</h3>
    <hr>
    <textarea name id cols="10" rows="5" placeholder="请输入要bb的内容" v-model="bbcontent"></textarea>

    <mt-button type="primary" size="large" @click="publicComment">发表评论</mt-button>
    <ul>
      <li v-for="(item, i) in commentsList" :key="item.add_time">
        <div class="cmt-top">第{{i}}楼 用户:{{item.user_name}}  发表时间{{item.add_time | dateformat}}</div>
        <span>{{item.content}}</span>
      </li>
    </ul>
    <mt-button type="danger" size="large" plain @click="getMore">获取更多</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      commentsList: [],
      pagecode: 1,
      bbcontent: ""
    };
  },
  created() {
    this.getCommentList();
  },
  methods: {
    //获取评论列表
    getCommentList() {
      this.$http
        .get("api/getcomments/" + this.artid + "?pageindex=" + this.pagecode)
        .then(result => {
          if (result.body.status == 0) {
            this.commentsList = this.commentsList.concat(result.body.message);
          } else {
            Toast("出错啦");
          }
        });
    },
    //加载更多评论
    getMore() {
      this.pagecode++;
      this.getCommentList();
    },
    //发表评论
    publicComment() {
      if (this.bbcontent.trim() == "") {
        Toast("内容为空");
        return;
      } else {
        this.$http
          .post("api/postcomment/" + this.artid, { content: this.bbcontent.trim() })
          .then(result => {
            if (result.body.status == 0) {
              Toast(result.body.message);
              var cmt = {
                add_time: Date.now(),
                user_name: "匿名用户",
                content: this.bbcontent.trim()
              };
              this.commentsList.unshift(cmt);
            }
          });
      }
    }
  },
  props: ["artid"]
};
</script>
<style lang="scss" scope>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  .cmt-top{
      background: #d0cbcb;
      margin-bottom: 5px;
  }
}
</style>